<template>
	<view class="">
		<view class="box">
			<u-form :model="form" ref="uForm" label-width="auto">
				<u-form-item label="旧密码:" prop="oldpassword">
					<!-- input-align="right" -->
					<u-input v-model="form.oldpassword" placeholder="请输入旧密码" />
				</u-form-item>
				<u-form-item label="新密码:" prop="newpassword">
					<!-- input-align="right" -->
					<u-input v-model="form.newpassword" placeholder="请输入新密码(6-20位数字和字母组合)" />
				</u-form-item>
				<u-form-item label="确认新密码:" prop="qrnewpassword">
					<!-- input-align="right" -->
					<u-input v-model="form.qrnewpassword" placeholder="请再次确认新密码" />
				</u-form-item>
			</u-form>
		</view>
		<view class="save" @click="save">
			保存
		</view>
	</view>

</template>

<script>
	import {
		changepwd
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				form: {
					oldpassword: '',
					newpassword: '',
					qrnewpassword: ''
				},
				rules: {
					oldpassword: [{
						required: true,
						message: '此为必填字段',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}, {
						// pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
						pattern: /^[0-9a-zA-Z]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字',
						trigger: ['blur', 'change'],
					}, {
						min: 6,
						max: 20,
						message: '长度在6-20个字符之间'
					}],
					newpassword: [{
						required: true,
						message: '此为必填字段',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}, {
						// pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
						pattern: /^[0-9a-zA-Z]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字',
						trigger: ['blur', 'change'],
					}, {
						min: 6,
						max: 20,
						message: '长度在6-20个字符之间'
					}],
					qrnewpassword: [{
						required: true,
						message: '此为必填字段',
						// blur和change事件触发检验
						trigger: ['blur', 'change'],
					}, {
						asyncValidator: (rule, value, callback) => {
							this.$u.post('/xxx/xxx', {
								name: value
							}).then(res => {
								// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
								if (res.error) {
									callback(new Error('姓名重复'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							})
						},
						// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
						// message: 'xxx'
					}]
				}
			}
		},
		methods: {
			save() {
				let data = {
					pwd: this.form.oldpassword,
					newpwd: this.form.newpassword
				}
				if (this.form.newpassword == this.form.qrnewpassword) {
					uni.showLoading({
						title: "修改中",
						mask: true
					})
					changepwd(data).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 2000
						})
						setTimeout(function() {
							uni.reLaunch({
								url: "../login/index",
							})
						}, 2000)
					})
				} else {
					uni.showToast({
						title: "确认密码错误",
						icon: "error",
						duration: 2000
					})
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.save {
		width: 602rpx;
		height: 83rpx;
		background-color: #ff3333;
		border-radius: 42rpx;
		line-height: 83rpx;
		text-align: center;
		margin: 70rpx auto;
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		color: #ffffff;
	}
</style>
